<template>
  <div
    :style="{ backgroundColor: colors.bgColor, height: 'auto' }"
    :class="[coupons.length ? 'min-height' : '']"
    h-full>
    <!-- 促销 -->
    <div class="wrapper" v-if="props.res">
      <div px-32rpx mb-10rpx text-24rpx v-for="(prom, index) in Object.keys(props.res)" v-if="props.res" :key="index">
        <div>
          <div pb-16rpx v-if="prom.split('-')[0] == 'FULL_DISCOUNT'">
            <div class="props.res_prom_item" v-if="props.res[prom].fullMinus">
              <nut-tag :custom-color="colors.themeColor">满减</nut-tag>
              <!-- TODO 后续将优化为可点击的商品以及优惠券显示明细 -->
              <span class="pro-text">
                满{{ props.res[prom].fullMoney }}元
                <span class="price">立减现金{{ props.res[prom].fullMinus }}元</span>
                <span v-if="props.res[prom].couponFlag">
                  &emsp;赠送
                  <span>优惠券</span>
                </span>
                <span v-if="props.res[prom].pointFlag">&emsp;赠送{{ props.res[prom].points }}积分</span>
                <span v-if="props.res[prom].giftFlag">&emsp;赠送商品</span>
                <span v-if="props.res[prom].freeFreightFlag">&emsp;赠送包邮服务</span>
              </span>
            </div>
            <div class="props.res_prom_item" v-if="props.res[prom].fullRate && props.res[prom].fullRateFlag">
              <nut-tag :custom-color="colors.themeColor">打折</nut-tag>
              <span class="pro-text">
                满{{ props.res[prom].fullMoney }}元，立享
                <span class="price">{{ props.res[prom].fullRate }}折</span>
                优惠
              </span>
            </div>
          </div>

          <div pb-16rpx v-if="prom.split('-')[0] == 'PINTUAN'">
            <div class="props.res_prom_item" v-if="props.res[prom].requiredNum">
              <nut-tag :custom-color="colors.themeColor">拼团</nut-tag>
              <span class="pro-text">
                {{ props.res[prom].requiredNum }}人拼团 限购
                <span class="price">{{ props.res[prom].limitNum }}件</span>
              </span>
              <span v-if="props.res[prom].pintuanRule">{{ props.res[prom].pintuanRule }}</span>
            </div>
          </div>

          <div pb-16rpx v-if="prom.split('-')[0] == 'SECKILL'">
            <div class="props.res_prom_item">
              <nut-tag :custom-color="colors.themeColor">限时抢购</nut-tag>
              <span class="pro-text">限时抢购</span>
            </div>
          </div>

          <div pb-16rpx v-if="prom.split('-')[0] == 'POINTS_GOODS'">
            <div class="props.res_prom_item">
              <nut-tag :custom-color="colors.themeColor">积分活动</nut-tag>
              <span class="pro-text">
                当前商品参与积分活动。
                <span @click="join(prom)" class="text-main-color">点击此处参与活动</span>
              </span>
            </div>
          </div>

          <div pb-16rpx v-if="prom.split('-')[0] == 'KANJIA'">
            <div class="props.res_prom_item">
              <nut-tag :custom-color="colors.themeColor">砍价活动</nut-tag>
              <span class="pro-text">
                当前商品参与砍价活动。
                <span @click="join(prom)" class="text-main-color">点击此处参与活动</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="Object.keys(props.res).length == 0" text-center mt-100rpx>暂无促销活动</div>
    </div>
    <!-- 优惠券 -->
    <div v-if="coupons.length != 0">
      <div v-for="(item, index) in coupons" @click="fetchCoupon(item)" :key="index">
        <coupon :res="item">
          <template #footer>
            <div text-24rpx text-main-color mt-20rpx>立即领取</div>
          </template>
        </coupon>
      </div>
    </div>
    <nut-toast ref="toastRef" />
  </div>
</template>

<script setup lang="ts">
import { receiveCoupons } from '@/api/promotion'
import coupon from '@/components/basic-template/coupon.vue'
import { colors } from '@/constants/injection-key'
import type { ToastInst } from 'nutui-uniapp'
const toastRef = ref<ToastInst>() // toast
const coupons = ref<any>([])
const props = defineProps<{
  res: any
}>()

watch(
  () => props.res,
  (val) => {
    if (val && val.length != 0) {
      Object.keys(val).forEach((item) => {
        let key = item.split('-')[0]
        if (key === 'COUPON') {
          coupons.value.push(val[item])
        }
      })
    }
  },
  { deep: true, immediate: true }
)

async function fetchCoupon(item: any) {
  try {
    toastRef.value?.showToast.loading('领取中...')
    const res = await receiveCoupons(item.id)
    toastRef.value?.hideToast()
    if (res.data.success) {
      uni.showToast({
        title: '领取成功',
        icon: 'none'
      })
    }
  } catch (error) {
    toastRef.value?.hideToast()
  }
}

// 跳转到参与商品活动的详情列表中
function join(val: string) {
  const promotion: any = {
    POINTS_GOODS: `/pages/promotions/point/detail?id=${props.res[val].id}`,
    KANJIA: `/pages/promotions/bargain/detail?id=${props.res[val].id}`
  }

  uni.navigateTo({
    url: promotion[val.split('-')[0]]
  })
}
</script>

<style scoped lang="scss">
.min-height {
  min-height: 100%;
}

.pro-text {
  font-size: 26rpx;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  margin-left: 20rpx;

  > span {
    margin-right: 15rpx;
  }
}

.wrapper {
  background: #fff;
  display: block;
}

.props.res_prom_item {
  margin: 20rpx 0;
}

.price_image {
  display: block;
}
</style>
